<template>
	<div class="app-content">
		<div class="app-main auto-fill-flex">
			<div class="padding-20">
				<el-row :gutter="20" class="cell-group">
					<el-col :span="20" v-for="(page, index) in pages" :key="index">
						<aiText class="cell-group-card" :card="page"></aiText>
					</el-col>

					<el-col :span="20" v-for="(page, index) in pages2" :key="index">
						<aiEchart class="cell-group-card" :card="page"></aiEchart>
					</el-col>
				</el-row>
				<el-row class="row-option margin-t-20">
					<div class="input-lists float-left">
						<el-input class="input-2" v-model="query.keyWord" placeholder="客群关键字" />
						<el-select class="input-1 margin-left" v-model="query.processingStatus" placeholder="客群生命周期">
							<el-option v-for="item in kqOptions" :key="item.value" :label="item.value"
								:value="item.id" />
						</el-select>
						<div class="input-2 margin-left date-picker">
							<el-date-picker style="width: 100%;" :editable="false" v-model="query.joinTime" value-format="YYYY-MM-DD" type="date" placeholder="客群加入时间" />
						</div>
<!--						<div class="margin-left">-->
<!--							<el-input class="input-3" placeholder="开始数值" />-->
<!--							<span>~</span>-->
<!--							<el-input class="input-3" placeholder="结束数值" />-->
<!--						</div>-->
						<el-select class="input-1 margin-left" v-model="query.clusterImportance" placeholder="客群级别">
							<el-option v-for="item in kqjbOptions" :key="item.value" :label="item.value"
								:value="item.id" />
						</el-select>
						<div class="float-right">
							<el-button type="primary" style="margin-left: 10px;" @click="queryList">查询</el-button>
							<el-button plain @click="resetQuery">重置</el-button>
						</div>
					</div>
				</el-row>
			</div>
			<div class="auto-fill-content padding-20-lr auto-fill-content--y">
				<el-row :gutter="20" v-loading="loading" class="vi-row-flex--stretch">
					<el-empty class="vi-empty-center" v-if="total <= 0" description="数据为空" />
					<el-col v-else :span="8" class="margin-tb clear-margin--top" v-for="(list, index) in planValueLists"
						:key="index">
						<customer-search-list-item :item-list="list" @selectionChange="selectionChange"></customer-search-list-item>
					</el-col>
				</el-row>
			</div>
			<div class="large-search">
				<div class="vi-container">
					<el-pagination class="float--right" background layout="prev, pager, next"
						@current-change="loadSelectList" v-model:current-page="pager.page" :page-size="pager.size"
						:total="total" />
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" name="work-group" setup>
import { router, service } from "/@/cool";
import { onMounted, reactive, ref } from 'vue'
import aiText from "/@/components/card/aiText.vue";
import aiEchart from "/@/components/card/aiEchart.vue"
import { Close, ArrowDown } from '@element-plus/icons-vue'
import CustomerSearchListItem from "/$/planning/components/customerSearchListItem.vue";
import { config } from '/@/utils/global'
import { ElMessage } from "element-plus";
import {get_cluster_type,get_cluster_processing_status} from "/@/utils/dictionary"
import { assign } from "/@/utils/tools"
let loading = ref<boolean>(false);
let total = ref<number>(0)
const pager = reactive({
	page: 1,
	size: config.PAGE_SIZE,
	"COOL_PAGE_OP": "ENTITY_WITH_RELATIONS"
})
const query = reactive({
	keyWord:"",//客群关键字
	processingStatus:"",//客群生命周期
	joinTime:"",//客群加入时间
	clusterImportance:"",//客户等级
})
let planValueLists = ref<any[]>([]);
//获取客群信息
const getMySelect = async () => {
	let queryParams = {...pager };assign(queryParams,query);
	let result:any = await service.customer.cluster.page(queryParams).catch((error) => {
		ElMessage({
			message: error.message || "加载失败",
			type: 'warning',
		})
		loading.value = false;
		return;
	}).finally(() => {
		loading.value = false;
	});
	planValueLists.value = result.list;
	total.value = result.pagination.total;
}
const loadSelectList = (value: number) => {
	pager.page = value;
	getMySelect();
}
const selectionChange = (planValueList: any) => { }
const queryList = () => {
   pager.page = 1;
   loadSelectList(pager.page);
}//查询
const resetQuery = () => {
	query.keyWord="";
	query.processingStatus="";
	query.joinTime="";
	query.clusterImportance="";
}//重置
onMounted(() => {
	getMySelect();
	getChart();
})
let pages = reactive([{
	imgUrl: '/images/001.png',
	textTop: '新增客群',
	textMid: '',
	textTip: '',
	textContent:'',
	color: '#4E68B7'
}, {
	imgUrl: '/images/002.png',
	textTop: '过期客群',
	textMid: '',
	textTip: '',
	textContent:'',
	color: '#91CC75'
}, {
	imgUrl: '/images/003.png',
	textTop: '未处理重点客群',
	textMid: '',
	textTip: '',
	textContent:'',
	color: '#FAC858'
}])
let pages2 = reactive([{
	imgUrl: '/images/icon01.png',
	textTop: '客群变化趋势图',
	textMid: '',
	textTip: '',
	data:[],
	type: 1
}, {
	imgUrl: '/images/icon01.png',
	textTop: '潜客占比',
	textMid: '',
	textTip: '',
	data:[],
	type: 2
}])
const getChart = async()=>{
	await service.customer.cluster.getChart({}).then(res=>{
		pages[0].textMid = res.addCount;
		pages[0].textTip = res.heightCount;
		pages[0].textContent = '重点客群';
		pages[1].textMid = res.oldCount;
		pages[1].textTip = res.oldHeightCount;
		pages[1].textContent = '重点客群';
		pages[2].textMid = res.count;
		pages[2].textTip = res.rate;
		pages[2].textContent = '较昨日增长';
		pages2[0].data = res.leadList;
		pages2[1].data = res.leadPin;
		pages2[1].textTip = res.leadRate;
	})
}
let kqOptions = get_cluster_processing_status();
let kqjbOptions = get_cluster_type();
let gridData = ref({
	oneValue: "",
	oneHide: false,
	oneLists: [
		{ name: "全部", key: 0 },
		{ name: "选择项1", key: 0 },
		{ name: "选择项2", key: 0 },
		{ name: "选择项3", key: 0 },
		{ name: "选择项4", key: 0 },
		{ name: "选择项6", key: 0 },
		{ name: "选择项7", key: 0 },
		{ name: "选择项8", key: 0 },
		{ name: "选择项9", key: 0 },
		{ name: "选择项10", key: 0 },
		{ name: "选择项11", key: 0 },
		{ name: "选择项12", key: 0 },
		{ name: "选择项13", key: 0 },
		{ name: "选择项14", key: 0 },
		{ name: "选择项15", key: 0 },
		{ name: "选择项16", key: 0 },
		{ name: "选择项17", key: 0 },
	],
	twoValue: "",
	twoHide: false,
	twoLists: [
		{ name: "全部", key: 0 },
		{ name: "选择项1", key: 0 },
		{ name: "选择项2", key: 0 },
		{ name: "选择项3", key: 0 },
		{ name: "选择项4", key: 0 },
		{ name: "选择项6", key: 0 },
		{ name: "选择项7", key: 0 },
		{ name: "选择项8", key: 0 },
		{ name: "选择项9", key: 0 },
		{ name: "选择项10", key: 0 },
		{ name: "选择项11", key: 0 },
		{ name: "选择项12", key: 0 },
		{ name: "选择项13", key: 0 },
		{ name: "选择项14", key: 0 },
		{ name: "选择项15", key: 0 },
		{ name: "选择项16", key: 0 },
		{ name: "选择项17", key: 0 },
	],
	threeValue: "",
	threeHide: false,
	threeLists: [
		{ name: "全部", key: 0 },
		{ name: "选择项1", key: 0 },
		{ name: "选择项2", key: 0 },
		{ name: "选择项3", key: 0 },
		{ name: "选择项4", key: 0 },
		{ name: "选择项6", key: 0 },
		{ name: "选择项7", key: 0 },
		{ name: "选择项8", key: 0 },
		{ name: "选择项9", key: 0 },
		{ name: "选择项10", key: 0 },
		{ name: "选择项11", key: 0 },
		{ name: "选择项12", key: 0 },
		{ name: "选择项13", key: 0 },
		{ name: "选择项14", key: 0 },
		{ name: "选择项15", key: 0 },
		{ name: "选择项16", key: 0 },
		{ name: "选择项17", key: 0 },
	],
})
const gridHide = (type) => {
	if (type == 1) {
		gridData.value.oneHide = !gridData.value.oneHide;
	} else if (type == 2) {
		gridData.value.twoHide = !gridData.value.twoHide;
	} else if (type == 3) {
		gridData.value.threeHide = !gridData.value.threeHide;
	}
}
const changeSelectValue = (name, type) => {
	if (type == 1) {
		gridData.value.oneValue = name;
	} else if (type == 2) {
		gridData.value.twoValue = name;
	} else if (type == 3) {
		gridData.value.threeValue = name;
	}
}
</script>
<style scoped lang="scss">
.large-search {
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: auto;
	text-align: center;

	.large-search-input {
		width: 940px;
	}
}

.margin-tb {
	margin-top: 20px;
	margin-bottom: 20px;
}

.input-lists {
	display: flex;

	.input-1 {
		width: 200px;
	}

	.input-2 {
		width: 350px;
	}

	.input-3 {
		width: 154px;
	}

	.input-4 {
		width: 150px;
	}

	.margin-left {
		margin-left: 20px;
	}
}

.select-view {
	.select-view-item {
		padding: 5px 15px;
		font-size: 14px;
		color: #333;
		text-align: center;
		line-height: 14px;
		white-space: nowrap;
		box-sizing: border-box;
		margin: 20px;
		cursor: pointer;

		&-active {
			background: #4165d7;
			color: #fff;
			border-radius: 40px;
		}
	}
}

.select-close-parent {
	position: relative;

	.select-view {
		padding-right: 60px;
		box-sizing: border-box;

		&.select-view-hide {
			height: 30px;
			overflow: hidden;
		}
	}

	.select-close {
		position: absolute;
		top: 0;
		right: 0px;
		display: flex;
		white-space: nowrap;
		cursor: pointer;
		align-items: center;
		text-align: center;

		.select-close-text,
		.select-close-icon {
			color: #4165d7;
			font-size: 14px;
		}

		.select-close-icon {
			margin-left: 5px;
		}
	}
}
</style>
